---
title: near-operation-file-preset
description: GraphQL Code Generator - Near Operation File Preset. Generates a file per each operation file.
---

import { Callout } from '@theguild/components'
import { PluginApiDocs, PluginHeader } from '@/components/plugin'
import { pluginGetStaticProps } from '@/lib/plugin-get-static-props'
export const getStaticProps = pluginGetStaticProps(__filename);

<PluginHeader />

This preset generates a file per each operation file.

## Example

In order to use this preset, you need to add 2 outputs to your `codegen.yml` file:

- The first, is the base types, generated by `typescript` plugin.
- The second, is the one that is in charge of generating types per operation.

This following example generates operation typings and `react-apollo` component per each operation file, near the original file of the operation:

```ts filename="codegen.ts"
import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: 'src/schema.json',
  documents: 'src/**/*.graphql',
  generates: {
    'src/types.ts': { plugins: ['typescript'] },
    'src/': {
      preset: 'near-operation-file',
      presetConfig: {
        extension: '.generated.tsx',
        baseTypesPath: 'types.ts',
      },
      plugins: ['typescript-operations', 'typescript-react-apollo'],
    },
  },
};
export default config;
```

**How does it work?**

The first output is simple, and it only generates the base schema types to `src/types.ts`.

The second output refers to the base directory of the project (`./src/`) and it uses the `near-operation-file` preset to generate a file per each operation found under `./src/**/*.graphql`.

The `presetConfig` section contains a key for setting the output files extension (in our case, `.generated.tsx` because of `react-apollo`), and the location of the base schema types file we created in the first section of this file (it will look for it in the base directory).

<Callout>
Note: If you're loading your `documents` from files with the same extension as the generated files, make sure the glob you use excludes the generated files. For example, if your original glob was `src/**/*.{ts,tsx}`, use `src/**/!(*.generated).{ts,tsx}` instead.
</Callout>

<PluginApiDocs />
